<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta charset="UTF-8">
		<title>地区选择</title>
		<!--Jquery-->
		<script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<!--页面样式文件-->
		<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
		<!--Mobiscroll脚本文件-->
		<link rel="stylesheet" type="text/css" href="../../dist/css/mobiscroll.custom-3.0.0.min.css"/>
		<script src="../../dist/js/mobiscroll.custom-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!--地区数据脚本-->
		<script src="area.js" type="text/javascript"></script>
		<style type="text/css">
			.set-area .mbsc-sc-whl-w{ min-width: 33.3% !important;}
			.set-area .mbsc-sc-itm {font-size: 1.533333em;}
			.set-area .mbsc-sc-whl-gr-3d .mbsc-sc-itm-3d {font-size: 1.366666em;}
		</style>
	</head>
	<body>
		<div class="container">
			<div style="height: 20px;"></div>
			<button type="button" class="btn btn-primary" id="demo">Select Area</button>
		</div>
	
	<script>
		//地区转换
		(function() {
			//初始地区
			var init = [];
			//mobiscroll初始值
			var parseValue = [];
			//第一次
			var init_on = 0;
			//省份
			nc_a.province = [];
			//城市
			nc_a.city = [];
			//县级
			nc_a.county = [];
			//初始化省份
			$.each(nc_a[0],function(i,item){
				if(init[0] && item[0]==init[0]){
					parseValue[0] = i;
				}
				nc_a.province[i] = {key: item[0], value : i, display: item[1]};
			})
			//初始化区县
			function county(key){
				key = (!key)?nc_a.city[0].key:key;
				if(!nc_a[key]){
					nc_a.county = [];
					return false;
				}
				$.each(nc_a[key], function(i,item) {
					if(init[2] && item[0]==init[2]){
						parseValue[2] = i;
					}
					nc_a.county[i] = {key: item[0], value : i, display: item[1]};
				});
			}
			//初始化城市
			function city(key){
				if(key){
					nc_a.city = [];
				}
				
				key = (!key)?nc_a.province[0].key:key;
				$.each(nc_a[key], function(i,item) {
					if(init[1] && item[0] == init[1]){
						parseValue[1] = i;
					}
					nc_a.city[i] = {key: item[0], value : i, display: item[1]};
				});
				var city_i = (init_on==0 && init[1])?init[1]:nc_a.city[0].key;
				county(city_i);
				//增加一个状态，防止重复初始化
				if(init_on==0){
					init_on = 1;
				}
			}
			
			city(init[0]);
			
			$('#demo').mobiscroll().scroller({
		        theme: 'auto',
		        lang: 'zh',
		        circular : false,
		        height : 40,
		        display: 'bottom',
		        cssClass : "set-area",
		        wheels: [
		            [{
		                data: nc_a.province
		            },{
		                data: nc_a.city
		            },{
		                data: nc_a.county
		            }]
		        ],
		        validate: function (data, inst) {
		        	var index = data.index,
		        		arr = data.values,
		        		settings = inst.settings,
		        		valid = [];
		        	if(index>=0){
		        		if(index==0){
		        			city(settings.wheels[0][0].data[arr[0]].key);
		        			inst.changeWheel({
							    1 : {data: nc_a.city},
							    2 : {data: nc_a.county}
							}, 300);
							valid = [arr[0], 0, 0];
		        		}else if(index==1){
		        			county(settings.wheels[0][1].data[arr[1]].key);
		        			inst.changeWheel({
							    2 : {data: nc_a.county}
							}, 300);
							valid = [arr[0], arr[1], 0];
		        		}
		        		
		        		if(index<2){
			        		return {
								valid : valid
							}
		        		}
		        	}
    			},
    			onSet: function (event, inst) {
    				var arr = inst._tempWheelArray,
    					settings = inst.settings,
    					output = settings.wheels[0][0].data[arr[0]].display
    					+ settings.wheels[0][1].data[arr[1]].display
    					output += (settings.wheels[0][2].data.length>0)?settings.wheels[0][2].data[arr[2]].display:"";
    					$("#demo").text(output);
    			},
    			parseValue: function (val) {
    				return parseValue;
				}
		    });
		    
		})();
	
	
		
	</script>
	</body>
</html>
